<script setup lang="ts">
import {computed, onMounted, ref} from 'vue'
import { Search } from '@element-plus/icons-vue'
import { get } from '../axios/http'

const search_label = ref('2')
const search_input = ref('')
const impact_start = ref('')
const impact_end = ref('')
const jcr_tag = ref('0')
const jcr_options = [
  {
    value: '0',
    label: '',
  },
  {
    value: '1',
    label: 'Q1',
  },
  {
    value: '2',
    label: 'Q2',
  },
  {
    value: '3',
    label: 'Q3',
  },
  {
    value: '4',
    label: 'Q4',
  },
]
const ptn_tag = ref('0')
const ptn_options = [
  {
    value: '0',
    label: '',
  },
  {
    value: '1',
    label: '1区',
  },
  {
    value: '2',
    label: '2区',
  },
  {
    value: '3',
    label: '3区',
  },
  {
    value: '4',
    label: '4区',
  },
]
const overview_tag = ref('0')
const overview_options = [
  {
    value: '0',
    label: '不限',
  },
  {
    value: '1',
    label: '0~5%',
  },
  {
    value: '2',
    label: '5%~10%',
  },
  {
    value: '3',
    label: '10%~20%',
  },
  {
    value: '4',
    label: '20%~30%',
  },
  {
    value: '5',
    label: '30%~50%',
  },
  {
    value: '5',
    label: '50%以上',
  },
]
const currentPage = ref(1);
const pageSize = ref(10)

const journalData = ref<any[]>([]);

async function fetchData(){
  let result = await get("/api/journal",{
    journalName_like: search_input.value,
    jcrQuartile: jcr_options[jcr_tag.value].label,
    domesticQuartile: ptn_options[ptn_tag.value].label,
  });
  journalData.value = result.data
}

const paginatedData = computed(()=>{
  if (journalData.value.length === 0) {
    return [];
  }
  const startIndex = (currentPage.value - 1) * pageSize.value
  return journalData.value.slice(startIndex, startIndex + pageSize.value)
})

function handlePageChange(page: number) {
  currentPage.value = page;
}

onMounted(() => {
  fetchData()
})
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="header-top">
          <div class="logo">
            <img src="../assets/img/1.png" />
            <img src="../assets/img/2.png" />
          </div>
          <div class="nav">
            <el-link :underline="false">期刊详情查询</el-link>
            <el-link :underline="false">AI智能选刊</el-link>
            <el-link :underline="false">期刊解析与推荐</el-link>
            <el-link :underline="false">iThenticate查重</el-link>
            <el-link :underline="false">关于我们</el-link>
            <el-button type="primary">登录/注册</el-button>
          </div>
        </div>
        <div class="header-bottom">
          <div class="header-search">
            <el-input
                v-model="search_input"
                style="max-width: 600px"
                placeholder="请输入内容"
                class="input-with-select"
            >
              <template #prepend>
                <el-select size="large" v-model="search_label"  style="width: 120px">
                  <el-option label="ISSN" value="1" />
                  <el-option label="期刊名称" value="2" />
                  <el-option label="简称" value="3" />
                  <el-option label="分类" value="4" />
                </el-select>
              </template>
              <template #append>
                <el-button :icon="Search" @click="fetchData"/>
              </template>
            </el-input>
          </div>
          <div class="header-filter">
            <el-row justify="center">
              <el-col :span="4">
                <div class="filter">
                  <el-text>影响因子</el-text>
                  <el-input v-model="impact_start" type="number" style="width: 50px" />
                  <span style="width: 10px; border-bottom: 1px solid #cacaca;margin: 0 5px"></span>
                  <el-input v-model="impact_end" type="number" style="width: 50px" />
                </div>
              </el-col>
              <el-col :span="4">
                <div class="filter">
                  <el-text>JCR分区</el-text>
                  <el-select
                      v-model="jcr_tag"
                      placeholder="Select"
                      style="width: 80px"
                      @change="fetchData"
                  >
                    <el-option
                        v-for="item in jcr_options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="filter">
                  <el-text>分区</el-text>
                  <el-select
                      v-model="ptn_tag"
                      placeholder="Select"
                      style="width: 80px"
                      @change="fetchData"
                  >
                    <el-option
                        v-for="item in ptn_options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="filter">
                  <el-text>综述占比</el-text>
                  <el-select
                      v-model="overview_tag"
                      placeholder="Select"
                      style="width: 120px"
                  >
                    <el-option
                        v-for="item in overview_options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-header>
      <el-main>
        <el-table :data="paginatedData">
          <el-table-column label="期刊名称" width="200" >
            <template #default="{ row }">
              <el-text size="large">{{ row.journalName }}</el-text>
              <div style="margin-bottom: 10px"></div>
              <el-text>{{ row.author }}</el-text>
            </template>
          </el-table-column>
          <el-table-column prop="database" label="数据库" sortable width="110" />
          <el-table-column prop="impactFactor" label="影响因子" sortable width="110" />
          <el-table-column prop="citationMetrics" label="引文指标" sortable width="110" />
          <el-table-column prop="jcrQuartile" label="JCR分区" sortable width="110" />
          <el-table-column prop="domesticQuartile" label="国内分区" sortable width="110" />
          <el-table-column prop="annualPublicationVolume" label="年发文量" sortable width="110" />
          <el-table-column prop="reviewArticleRatio" label="综述占比" sortable width="110" />
          <el-table-column prop="openAccessRatio" label="开源占比" sortable width="110" />
          <el-table-column prop="isDomestic" label="是否国产" width="110" />
        </el-table>

        <el-pagination
            background
            layout="prev, pager, next"
            :total=journalData.length
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="handlePageChange"
            style="margin: 20px 0"/>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>


.el-table{
  width: auto;
}

.el-main{
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.filter{
  display: flex;
  align-items: center;
}

.filter .el-text {
  margin-right: 10px; /* 可选：如果只想给 p 和其他元素之间添加间隙 */
}

.header-search{
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: center;
}

.nav .el-button {
  margin-left: 20px;
}

.nav .el-link{
  padding: 0 20px;
  border-right: #1a1a1a 1px solid;
}

.logo :first-child{
  border-right: #1a1a1a 1px solid;
}
.logo *{
  height: 30px;
  padding: 0 15px;
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dcdfe6;
  padding: 0 10%;
  height: 50px;
}

.el-header {
  display: flex;
  flex-direction: column;
  --el-header-height: 200px;
  --el-header-padding: 0;
  box-shadow: 0 5px 7px rgba(0, 0, 0, .1);
  margin-bottom: 20px;
}
</style>